import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import { Translate } from 'react-jhipster';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { useAppDispatch, useAppSelector } from 'app/config/store';
import { getEntity, deleteEntity } from './activity-property.reducer';
import { IActivityProperty } from 'app/shared/model/activity-property.model';
// import { deletePropertyTemp, changePropertyTemp } from 'app/entities/activity/activity.reducer';

export const ActivityPropertyAppender = ({ property, index, propRefs, deletePropertyMethod, changePropertyMethod }) => {
  const dispatch = useAppDispatch();

  const [pName, setPName] = useState('');
  const [pValue, setPValue] = useState('');

  useEffect(() => {
    setPName(property.propertyName);
    setPValue(property.propertyValue);
  }, []);

  // useEffect(() => {
  //   if (property) {
  //     const ref = propRefs.current[index];
  //     if (ref && property.id) {
  //       ref.children[1].value = property.propertyValue;
  //     }
  //   }
  // }, [property, propRefs]);

  const deleteProperty = event => {
    // dispatch(deletePropertyTemp(index));
    deletePropertyMethod(index);
  };

  const changeText = event => {
    if (event.target.getAttribute('name') == 'activity-property-name') {
      setPName(event.target.value);
    } else {
      setPValue(event.target.value);
    }
  };

  const changeProperty = event => {
    const isName = event.target.getAttribute('name') == 'activity-property-name';
    changePropertyMethod(index, isName ? { name: event.target.value } : { value: event.target.value });
  };

  // const updateStorePropertyValue = event => {
  //   const value = event.target.value;
  //   if (event.target.getAttribute('name') == 'activity-property-name') {
  //     dispatch(changePropertyTemp({ pName: value, pValue: null, index: index }));
  //   } else {
  //     dispatch(changePropertyTemp({ pName: null, pValue: value, index: index }));
  //   }
  // };

  return (
    <div ref={el => (propRefs.current[index] = el)} element-type="propertyKV">
      {property.id ? (
        <label htmlFor={'activity-property-' + property.id} id={'activity-property-name'} className="form-label">
          {pName}
        </label>
      ) : (
        <>
          <span>属性名:</span>
          <input
            name={'activity-property-name'}
            id={'activity-property-name'}
            data-cy="activity-property"
            type="text"
            className="form-control"
            style={{ display: 'inline', width: 500 }}
            value={pName}
            onChange={changeText}
            onBlur={changeProperty}
          />
        </>
      )}
      <input
        name={'activity-property-value' + index}
        id={'activity-property-value' + index}
        data-cy="activity-property"
        type="text"
        className="form-control"
        value={pValue}
        onChange={changeText}
        onBlur={changeProperty}
      />
      <input type="hidden" id="data-id" value={property.id} />
      <input onClick={deleteProperty} type="button" data-index={index} value="删除" />
    </div>
  );
};

export default ActivityPropertyAppender;
